'use client';

import Image from "next/image";
import { motion } from "framer-motion";
import { StarIcon, ShoppingCartIcon, HeartIcon } from "@heroicons/react/24/outline";
import { Button, Card, Rate, Badge, Row, Col, Divider } from 'antd';
import { useState } from 'react';
import Link from 'next/link';

// Mock数据
const mockProducts = [
  {
    id: 1,
    name: "时尚运动鞋",
    price: 599,
    originalPrice: 799,
    discount: 25,
    rating: 4.8,
    reviewCount: 128,
    image: "/product1.jpg",
    isFavorite: false,
    isNew: true
  },
  {
    id: 2,
    name: "无线蓝牙耳机",
    price: 299,
    originalPrice: 399,
    discount: 25,
    rating: 4.6,
    reviewCount: 96,
    image: "/product2.jpg",
    isFavorite: true,
    isNew: false
  },
  {
    id: 3,
    name: "智能手表",
    price: 1299,
    originalPrice: 1599,
    discount: 19,
    rating: 4.9,
    reviewCount: 256,
    image: "/product3.jpg",
    isFavorite: false,
    isNew: true
  },
  {
    id: 4,
    name: "背包",
    price: 199,
    originalPrice: 299,
    discount: 33,
    rating: 4.5,
    reviewCount: 87,
    image: "/product4.jpg",
    isFavorite: false,
    isNew: false
  }
];

const mockCategories = [
  { id: 1, name: "电子产品", icon: "📱", path: "/category/electronics" },
  { id: 2, name: "服装", icon: "👕", path: "/category/clothing" },
  { id: 3, name: "家居", icon: "🏠", path: "/category/home" },
  { id: 4, name: "运动", icon: "⚽", path: "/category/sports" },
  { id: 5, name: "美妆", icon: "💄", path: "/category/beauty" },
  { id: 6, name: "食品", icon: "🍎", path: "/category/food" }
];

// 产品卡片组件
function ProductCard({ product }) {
  const [isFavorite, setIsFavorite] = useState(product.isFavorite);
  
  return (
    <div
      className="border border-gray-200 rounded-lg hover:shadow-lg transition-shadow relative"
      whileHover={{ y: -5 }}
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
    >
      {product.isNew && (
        <Badge.Ribbon text="新品" color="red">
          <div className="absolute top-2 left-2 bg-red-500 text-white text-xs px-2 py-1 rounded">
            新品
          </div>
        </Badge.Ribbon>
      )}
      <button 
        className="absolute top-2 right-2 p-1 rounded-full hover:bg-gray-100"
        onClick={() => setIsFavorite(!isFavorite)}
      >
        <HeartIcon className={`h-5 w-5 ${isFavorite ? 'text-red-500 fill-current' : 'text-gray-400'}`} />
      </button>
      
      <div className="aspect-square bg-gray-100 rounded-lg mb-4 flex items-center justify-center">
        <span className="text-4xl">{product.image}</span>
      </div>
      
      <div className="p-4">
        <h3 className="font-medium text-gray-900 truncate">{product.name}</h3>
        
        <div className="flex items-center mt-1">
          <Rate disabled defaultValue={Math.floor(product.rating)} allowHalf />
          <span className="text-xs text-gray-500 ml-1">({product.reviewCount})</span>
        </div>
        
        <div className="flex items-center mt-2">
          <span className="text-lg font-bold text-gray-900">¥{product.price}</span>
          {product.originalPrice > product.price && (
            <>
              <span className="text-sm text-gray-500 line-through ml-2">¥{product.originalPrice}</span>
              <span className="text-sm font-medium text-red-500 ml-2">-{product.discount}%</span>
            </>
          )}
        </div>
        
        <div className="mt-4 flex space-x-2">
          <Button 
            type="primary" 
            className="flex-1 flex items-center justify-center"
            icon={<ShoppingCartIcon className="h-4 w-4 mr-1" />}
          >
            加入购物车
          </Button>
          <Button 
            icon={<HeartIcon className="h-4 w-4" />}
            onClick={() => setIsFavorite(!isFavorite)}
          />
        </div>
      </div>
    </div>
  );
}

// 分类卡片组件
function CategoryCard({ category }) {
  return (
    // 添加 Link 组件包装以实现页面跳转
    <Link href={category.path}>
      <motion.div
        className="flex flex-col items-center p-4 border border-gray-200 rounded-lg hover:shadow-md cursor-pointer"
        whileHover={{ scale: 1.05 }}
        whileTap={{ scale: 0.95 }}
      >
        <span className="text-2xl mb-2">{category.icon}</span>
        <span className="text-sm font-medium">{category.name}</span>
      </motion.div>
    </Link>
  );
}

// 主页组件 - 使用 Tailwind CSS 样式
export default function Home() {
  return (
    // 页面容器
    <div className="min-h-screen flex flex-col">
      {/* 页面主要内容 */}
      <main className="flex-grow">
        {/* Hero区域 */}
        <section 
          className="bg-gradient-to-r from-blue-500 to-purple-600 text-white py-16"
          initial={{ opacity: 0 }}
          animate={{ opacity: 1 }}
          transition={{ duration: 0.5 }}
        >
          <div className="container mx-auto px-4 text-center">
            <h1 
              className="text-4xl md:text-6xl font-bold mb-4"
              initial={{ y: 20, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.2, duration: 0.5 }}
            >
              欢迎来到我们的商城
            </h1>
            <p 
              className="text-xl mb-8 max-w-2xl mx-auto"
              initial={{ y: 20, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.4, duration: 0.5 }}
            >
              发现最新最热的商品，享受无与伦比的购物体验
            </p>
            <div
              initial={{ y: 20, opacity: 0 }}
              animate={{ y: 0, opacity: 1 }}
              transition={{ delay: 0.6, duration: 0.5 }}
            >
              <Button 
                type="primary" 
                size="large"
                className="bg-white text-blue-600 font-bold hover:bg-gray-100"
              >
                立即选购
              </Button>
            </div>
          </div>
        </section>

        {/* 分类导航 */}
        <section className="py-12 bg-gray-50">
          <div className="container mx-auto px-4">
            <h2 className="text-2xl font-bold text-center mb-8">热门分类</h2>
            <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-6 gap-4">
              {mockCategories.map((category) => (
                <CategoryCard key={category.id} category={category} />
              ))}
            </div>
          </div>
        </section>

        {/* 特价商品 */}
        <section className="py-12">
          <div className="container mx-auto px-4">
            <div className="flex justify-between items-center mb-8">
              <h2 className="text-2xl font-bold">特价商品</h2>
              <a href="#" className="text-blue-600 hover:underline">查看全部</a>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {mockProducts.map((product, index) => (
                <div
                  key={product.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.1 }}
                >
                  <ProductCard product={product} />
                </div>
              ))}
            </div>
          </div>
        </section>

        {/* 推荐商品 */}
        <section className="py-12 bg-gray-50">
          <div className="container mx-auto px-4">
            <div className="flex justify-between items-center mb-8">
              <h2 className="text-2xl font-bold">推荐商品</h2>
              <a href="#" className="text-blue-600 hover:underline">查看全部</a>
            </div>
            <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6">
              {mockProducts.slice().reverse().map((product, index) => (
                <div
                  key={product.id}
                  initial={{ opacity: 0, y: 20 }}
                  animate={{ opacity: 1, y: 0 }}
                  transition={{ delay: index * 0.1 }}
                >
                  <ProductCard product={product} />
                </div>
              ))}
            </div>
          </div>
        </section>
      </main>
      
      {/* 页脚区域 */}
      <footer className="flex flex-wrap items-center justify-center gap-6 p-6 border-t border-gray-200">
        <a
          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-2 hover:underline"
        >
          {/* 页脚Logo图片 */}
          <Image
            aria-hidden
            src="/file-text.svg"
            alt="File icon"
            width={16}
            height={16}
          />
          Learn
        </a>
        <a
          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-2 hover:underline"
        >
          {/* 页脚Logo图片 */}
          <Image
            aria-hidden
            src="/window.svg"
            alt="Window icon"
            width={16}
            height={16}
          />
          Examples
        </a>
        <a
          href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
          target="_blank"
          rel="noopener noreferrer"
          className="flex items-center gap-2 hover:underline"
        >
          {/* 页脚Logo图片 */}
          <Image
            aria-hidden
            src="/globe.svg"
            alt="Globe icon"
            width={16}
            height={16}
          />
          Go to nextjs.org →
        </a>
      </footer>
    </div>
  );
}